Video

Probleemstelling

Als we de wireframes (Case study Biblioshop - wireframes) bekijken stellen we vast dat de header en de navigatie voor alle drie de webpagina's dezelfde is. Wel hebben we twee verschillende leay-outs, één voor de staande versie en een andere voor de liggende. Maar die zijn voor alle webpagina's in onze website dezelfde:

Voor de sidebar en de voet is het nog eenvoudiger, die zijn gewoon identiek op de drie pagina's.

Oplossing

In de les CSS lay-out met flexbox case study biblio - horizontale navigatie hebben gezien hoe je flexbox kan gebruiken om de gewenste lay-out voor staand en liggend te realiseren. We moeten o.a. de hoogte van de rij van grid-template-area aanpassen.

1. CSS
   1. Maak in de map biblioshop een submap met de naam image. Download het logo van de Biblioshop -> logobookshelf.zip en plaats het in de map biblioshop/image.
   2. We maken van het header element met de klassenaam head een flex-container:

      .head {
          grid-area: kop;
          display:flex;
      }

   3. We kopIëren de CSS uit CSS lay-out met flexbox case study biblio - horizontale navigatie en plakken die in biblioshop/css/biblioshop.css:

      /* horizontale navigatie */

      .logo {
          display: block;
          flex-grow: 0.2;
          flex-shrink: 0;
          flex-basis: 160px;
      }
      
      .logo img {
          height: 130px
      }
      
      .horizontal-nav {
          flex-grow: 0;
          flex-shrink: 0;
          flex-basis: auto;
          align-self: center;
          display: flex;
          flex-direction: column;
      }
      
      .horizontal-nav a {
          margin-left: 4rem;
          text-decoration: none;
          cursor: pointer;
          color: #E20513;
          /* AP rood */
          font-size: 1.4rem;
          position: relative;
      }
      
      .horizontal-nav a::after {
          position: absolute;
          top: 0;
          left: 0;
          content: '';
          border-bottom: #AD0F09 solid 3px;
          /* AP donker rood */
          width: 0;
          background: transparent;
          transition: width .2s ease, border-bottom .3s ease;
          text-align: center;
          height: 2rem;
      }
      
      .horizontal-nav a:hover::after {
          width: 100%;
      }
      
      .selected:after {
          width: 100%;
      }
      
      

   4. We hebben als laatste een stijl regel toevoegd voor de selected klasse. Deze zorgt ervoor dat als een een a element van de klasse selected onderstreept zal zijn.
      Knip en plak deze CSS in het bestand biblioshop/css.biblioshop.css.

   5. Tenslotte kopiëren we ook de media-query voor de liggende navigatie. We veranderen de hoogte van 130px naar 120px en voegen links en boven witruimte toe:

      @media (min-width: 800px) {
          .logo img {
              height: 120px;
              margin: 0;
          }
      
          .horizontal-nav {
              flex-direction: row;
          }
      }
      

      En we passen de hoogte aan in de grid-template, van 80px naar 120px:

      @media all and (min-width: 575px) {
          body {
              grid-template-rows: 120px 70px 1fr 70px;
              grid-template-columns: 20% 1fr;
              grid-template-areas: "kop kop" "zijbalk uitleg" "zijbalk showroom" "voet voet";
          }
          /* de sidebar is alleen zichtbaar op een tablet of comuterscherm */
          .sidebar {
              display: block;
          }
      }
      
      

   6. We passen de hoogte van het logo ook aan voor de staande versie:

      .logo img {
          height: 130px;
          margin: 10px 0 0 10px;
      }

   7. Voor de staande versie stellen we de eerste rij van grid-template-area in op 130px:

      grid-template-rows: 130px 100px 1fr 70px;

   8. We verwijderen de groene achtergrond van het header element. Verwijder de doorstreepte tekst:

      .head, .foot, .show-room, .sidebar, .explanation {
          padding: 1.2em;
          background: yellowgreen;
      }

      En het wordt:

      .foot, .show-room, .sidebar, .explanation {
          padding: 1.2em;
          background: yellowgreen;
      }

   9. We verwijderen de groene achtergrondkleur en tekenen een kader rond de HTML elementen van de volgende klassen:

      .foot, .show-room, .sidebar, .explanation {
          padding: 1.2em;
          border: solid 1px darkgrey;
      }

   10. We voegen een beetje meer witruimte toe tussen de inhoud en de rand van de sidebar:

       .sidebar {
           grid-area: zijbalk;
           display: none;
           padding: 2em;
       }

   11. We maken de ongeordende lijst in de sidebar op:

       .sidebar ul {
           list-style-position: inside;
       }
       
       

2. HTML
   Wijzig de klassenaam control-panel in head en wijzig de extensie van het logobestand van png naar jpg:

   <header class="head">
       <a class="logo" href="/index.html"><img src="image/logobookshelf.jpg"></a>
       <nav class="horizontal-nav">
           <a href="index.html">Home</a>
           <a href="books.html">Boeken</span></a>
           <a href="#">Bestel</span></a>
       </nav>
   </header>

   1. index.html
      Knip en plak deze HTML in de index.html. Let erop dat we de klasse selected toevoegen aan het a element voor de homepagina:

      <!DOCTYPE html>
      <html lang="nl">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta name="application-name" content="Biblio webwinkel">
          <meta name="description" content="Verkoop tweedehandsboeken">
          <meta name="keywords" content="boeken, books, tweedehands">
          <meta name="author" content="Jef Inghelbrecht">
          <meta name="date" content="2020-10-05">
          <meta name="time" content="17:40:33">
          <link href="css/biblioshop.css" rel="stylesheet" type="text/css" />
          <title>Biblioshop</title>
      </head>
      <body>
          <header class="head">
              <a class="logo" href="/index.html"><img src="image/logobookshelf.jpg"></a>
              <nav class="horizontal-nav">
                  <a href="index.html" class="selected">Home</a>
                  <a href="books.html">Boeken</span></a>
                  <a href="order.html">Bestel</span></a>
              </nav>
          </header>
          <aside class="sidebar">
              <p>Ruime keuze uit:</p>
              <ul>
                  <li>C++</li>
                  <li>JavaScript</li>
                  <li>HTML</li>
                  <li>CSS</li>
                  <li>SQL</li>
                  <li>Computerscience</li>
                  <li>PHP</li>
              </ul>
          </aside>
          <section class="explanation">uitleg</section>
          <section class="show-room">showroom</section>
          <footer class="foot">&copy;Biblioshop & partners</footer>
      </body>

      </html>

   2. books.html
      We tonen hier alleen de header, de rest is identiek aan index.html. Let erop we de klasse selected toevoegen aan het a element voor de books-pagina:

      <header class="head">
          <a class="logo" href="/index.html"><img src="image/logobookshelf.jpg"></a>
          <nav class="horizontal-nav">
              <a href="index.html">Home</a>
              <a href="books.html" class="selected">Boeken</span></a>
              <a href="order.html">Bestel</span></a>
          </nav>
      </header>
      
      

   3. order.html
      We tonen hier alleen de header, de rest is identiek aan index.html. Let erop we de klasse selected toevoegen aan het a element voor de order-pagina:

      <header class="head">
          <a class="logo" href="/index.html"><img src="image/logobookshelf.jpg"></a>
          <nav class="horizontal-nav">
              <a href="index.html">Home</a>
              <a href="books.html">Boeken</span></a>
              <a href="order.html" class="selected">Bestel</span></a>
          </nav>
      </header>